<script></script>
<template>
    <main>
    <!-- 主体头部图 -->
    <div class="main-head w">
      <img src="./upload/main-01.webp" alt="">
    </div>
    <!-- 手机介绍模块 -->
    <div class="introduce w">
      <div class="int-head">
        <sapn>手机</sapn>
        <a href="#">
          查看更多
          <i>></i>
        </a>
      </div>
      <div class="int-body w">
        <div class="int-b-l">
          <img src="../upload/introduce01.webp" alt="">
        </div>
        <div class="int-b-r">
          <ul>
            <li>
              <a href="#">
                <img src="../upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
              <a href="#">
                <img src="../upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
            <a href="#">
              <img src="../upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
           </li>
           <li>
              <a href="#">
                <img src="../upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
              <a href="#">
                <img src="../upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
            </a>
           </li>
           <li>
              <a href="#">
                <img src="../upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
            <a href="#">
              <img src="../upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
            </li>
            <li>
            <a href="#">
              <img src="../upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    </main>
</template>
<style>
.main {
  /* 行内块与块级元素之间不会产生margin 塌陷 */
  display: inline-block;
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 30px;
}
.main .main-head  {
  margin: 20px auto;
}
.main .main-head img{
  width: 100%;
}
/* 手机介绍模块 */
.introduce .int-head {
  height: 58px;
  line-height: 58px;
  margin-top: 20px;
}
.introduce .int-head span {
  float: left;
}
.introduce .int-head a {
  float: right;
  margin-right: 16px;
  position: relative;
  color: #000; 
}
.introduce .int-head a i {
  position: absolute;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  top: 37%;
  right: -20px; 
  background-color: #b0b0b0;
  border-radius: 50%;
  color: #fff;
}
.introduce .int-head a:hover{
  color: #ff6700;
}
.introduce .int-head a:hover i {
  background-color: #ff6700;
}
.int-body {
  height: 614px;
}
.int-b-l {
  float: left;
  width: 234px; 
  height: 100%;
  background-color: #fff;
}
.int-b-l img {
  width: 100%;
}
.int-b-r {
  float: right;
  width:990px;
  height: 100%;
  /* background-color: skyblue; */
}
.int-b-r ul li  {
  float: left;
}
.int-b-r ul li a {
  display: inline-block;
  width: 234px;
  height: 300px;
  margin-left: 13px;
  margin-bottom: 13px;
  padding-top: 20px;
  text-align: center;
  background-color: #fff;
  font-size: 12px;
  color: #404040;
  transition: all .2s linear;
}
/* .int-b-r ul li:nth-child(4n) a {
  margin-left: 0;
} */
.int-b-r ul li a img {
  width: 160px;
}
.int-b-r ul li h3 {
  margin: 15px 0 5px 0;
}
.int-b-r ul li p {
  margin-bottom: 15px;
  color: #ccc;
}
.int-b-r ul li span {
  color: #ff6700;
}
.int-b-r ul li del {
  color: #ccc;
} 
.int-b-r ul li:hover a {
  transform: translateY(-3px);
  box-shadow: 0 4px 13px 4px rgb(225, 225, 225);
}
</style>
